<script setup>
import { reactive, ref, watchEffect } from 'vue';
import * as api from '@/api/sys/role.js';
import { ElMessage } from 'element-plus';

// form表单类============
let form = reactive({
    id: '',
  roleName: '',
  roleCode: '',
  roleType: '',
  roleDesc: '',
})

const formSetter = (v) => {
    form.id = v?.id
    form.roleName = v?.roleName;
    form.roleCode = v?.roleCode;
    form.roleType = v?.roleType;
    form.roleDesc = v?.roleDesc;
};
// ==============


const props = defineProps({
    data: Object
})

const visible = defineModel();

watchEffect(() => {
    formSetter(props.data)
})

const emit = defineEmits(['transfer','success'])

// 提交方法
const submit = () =>{
    if(!form.id){
        console.log(form)
        api.add(form).then(res =>{
            ElMessage({
                message: res.msg,
                type: 'success'
            });
            emit('success')
            visible.value = false
        })
    }else{
        api.update(form).then(res =>{
            ElMessage({
                message: res.msg,
                type: 'success'
            });
            emit('success')
            visible.value = false
        })
    }
}
</script>
<template>
    <div>
        <el-dialog v-model="visible" :title="form.id ? '修改' : '添加'" width="500">
            <el-form :model="form">
                <el-form-item label="角色名">
                    <el-input v-model="form.roleName"/>
                </el-form-item>
                <el-form-item label="角色编码">
                    <el-input v-model="form.roleCode"/>
                </el-form-item>
                <el-form-item label="角色类型">
                    <el-input v-model="form.roleType"/>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="form.roleDesc"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false" style="padding: 0 16px;">取消</el-button>
                    <el-button type="primary" @click="submit" style="padding: 0 16px;">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
